<template>
    <div>
        <TypeNav/>
        <ListContainer/>
        <Process/>
        <Item :classify="classify"/>
        <Like :commodityList="commodityList"/>
        <ListGoods v-for="(c,index) in classify" :key="c.id" :classify="classify[index]"/>
        <div class="top" ref="top" @click="backTop" v-if="btnFlag">
          UP
        </div>
    </div>
</template>

<script>
import TypeNav from './TypeNav'
import ListContainer from './ListContainer'
import Like from './Like'
import ListGoods from './ListGoods'
import Item from './Item'
import { mapState,mapGetters } from "vuex";
export default {
    name:'Paimai',
    components:{
        TypeNav,
        ListContainer,
        Like,
        ListGoods,
        Item
    },
    data() {
        return {
            goods:[],
            btnFlag:false,
        }
    },
    mounted() {
        this.$store.dispatch("getCommodityList");
        this.$store.dispatch("getGoodsList");
        this.$store.dispatch("getAllGoodsPublist");
        window.addEventListener('scroll', this.scrollToTop)
    },
    destroyed () {
      window.removeEventListener('scroll', this.scrollToTop)
    },
    computed:{
        ...mapState({
          commodityList: (state) => state.paimai.commodityList,
          getGoodsList: (state)=> state.paimai.getGoodsList,
          allgoodspublist: (state)=> state.paimai.allgoodspublist,
        }),
        ...mapGetters(['classify']),
    },
    methods: {
        backTop(){
          let timer = setInterval(() => {
            let back = Math.floor(-this.scrollTop / 10)//返回的速度
            document.documentElement.scrollTop = document.body.scrollTop = this.scrollTop + back
            // 控制滚动条返回到哪里
            if (this.scrollTop < 500) {
              clearInterval(timer)
            }
          }, 16)
        },
        // 为了计算距离顶部的高度，up的显示隐藏
        scrollToTop () {
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          this.scrollTop = scrollTop
          if (this.scrollTop > 860) {
            this.btnFlag = true
          } else {
            this.btnFlag = false
          }
        }
    },
}
</script>

<style scoped>
.top{
  position: fixed;
  right: 200px;
  bottom: 200px;
  height:40px;
  width: 40px;
  background-color: #f2f5f6;
  box-shadow: 0 0 6px rgba(0,0,0, .12);
  text-align: center;
  line-height: 40px;
  color: #1989fa;
}
</style>